<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
    <style type="text/css">
      .v-enter,
      .v-leave-to {
        /* 一开始刷新浏览器时 这里的v-enter状态是给未显示的元素(组件)设置的 */
        /*
            
            单个元素(组件)实现完整动画 需要触发两次事件 第一次是入场 第二次是出场
            列表动画属于单个元素动画类型

            多个元素(组件)中任选两个元素(组件)实现完整动画 只需触发一次事件
            给transition 设置mode='out-in'后 先出去完成后再进来

            未显示元素(组件)处于v-enter状态
            in(后执行):
            .v-enter{
                opacity: 0;
                transform: translateX(180px);
            }
            ==> 
            .v-enter-to{
                opacity: 1;
                transform: translateX(0);
            }
            
            out(先执行):
            已显示元素(组件)处于v-leave状态
            .v-leave {
                opacity: 1;
                transform: translateX(0);
            }
            ==>
            .v-leave {
                opacity: 0;
                transform: translateX(180px);
            }
            完整动画： v-leave => v-leave-to => v-enter => v-enter-to
            */
        opacity: 0;
        transform: translateX(180px);
      }

      .v-enter-active,
      .v-leave-active {
        transition: all 1s ease;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <a href="" @click.prevent="comName='login'">登陆</a>
      <a href="" @click.prevent="comName='register'">注册</a>
      <!-- 通过 mode 属性,设置组件切换时候的 模式 out-in先离开完毕时再进来 还有可以in-out -->
      <!-- component实现组件切换 transition实现单个元素(组件)动画 -->
      <!-- 这里是边切换的同时边实现动画 -->
      <transition mode="out-in">
        <component :is="comName"></component>
      </transition>
    </div>

    <script type="text/javascript">
      // 组件名称是 字符串
      Vue.component("login", {
        template: "<h1>登陆组件</h1>"
      });

      Vue.component("register", {
        template: "<h1>注册组件</h1>"
      });

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          comName: "login" // 当前 component 中的 :is 绑定的组件的名称
        },
        methods: {}
      });
    </script>
  </body>
</html>
